<template>
  <div class="root">
    <firework />
    <VHeader />
    <navs />
    <myFooter />
    <footerNav />
    <backTop />
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed } from "vue"
import VHeader from "./v-header.vue"
import navs from "./navs.vue"
import footerNav from "./footerNav.vue"
import myFooter from "./myFooter.vue"
import backTop from "./backTop.vue"
import firework from "@cop/firework/index.vue"
import bus from "@/eventBus"
import { useStore } from "vuex"
import { useMessage, useNotification } from "naive-ui"
import { resizeEffectArray, isPC, width, height } from "@/hooks/resize"

window.$msg = useMessage()
window.$notifi = useNotification()
const store = useStore()

const initTheme = () => {
  const hours = new Date().getHours()
  if (hours >= 18 || hours <= 4) {
    store.commit("setTheme", "dark")
  } else {
    store.commit("setTheme", "light")
  }
}

const rootOpacity = computed(() => store.state.rootOpacity)
// const initSakuraAniamte = (isPc: boolean, width: number, height: number) => {
//   // console.log("sakura", isPc)
//   const sakuraEl = document.getElementById("canvas_sakura") as HTMLCanvasElement
//   if (isPc && bus.state.theme == "light") {
//     sakuraEl.style.display = "block"
//   } else {
//     sakuraEl.style.display = "none"
//   }
//   sakuraEl.width = width
//   sakuraEl.height = height
// }

// resizeEffectArray.push(initSakuraAniamte)

// bus.on("theme", (v: "light" | "dark") => {
//   const sakuraEl = document.getElementById("canvas_sakura") as HTMLCanvasElement
//   if (v == "dark") {
//     sakuraEl.style.display = "none"
//   } else if (isPC.value) {
//     sakuraEl.style.display = "block"
//   }
// })
onMounted(() => {
  initTheme()
  // initSakuraAniamte(isPC.value, width.value, height.value)
})
</script>

<style lang="scss" scoped>
.root {
  width: var(--rootPcWith);
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 70px;
  color: var(--TextColor);
  transition: all 0.3s var(--n-bezier);
  opacity: v-bind(rootOpacity);
}

@media screen and (max-width: 1000px) {
  .root {
    margin-left: 0 !important;
  }
}
</style>
